<template>
    <view class="sale-tip">
        <swiper class="swiper" autoplay="true" :interval="tipInterval" duration="1000" vertical="true" circular="true">
            <swiper-item v-for="(item, index) in tipsList" :key="index">
                <view class="swiper-item">{{ item }}</view>
            </swiper-item>
        </swiper>
        <slot></slot>
    </view>
</template>
<script>
export default {
    data() {
        return {
            tipInterval: '4000'
        };
    },
    props: {
        tipsList: {
            type: Array,
            required: true
        }
    }
};
</script>
<style lang="less" scoped>
.sale-tip {
    position: fixed;
    top: 0;
    z-index: 10;
    font-size: 0;
    width: 100%;
    height: 78rpx;
    line-height: 78rpx;
    color: #d18737;
    background: #fbf3e9;
    overflow: hidden;
    .swiper {
        height: 100%;
        .swiper-item {
            margin-left: 30rpx;
            height: 78rpx;
            font-size: 28rpx;
            line-height: 78rpx;
        }
    }
}
</style>
